<template>
  <el-dialog
    v-model="visible"
    title="事件详细信息"
    width="500px"
    custom-class="event-detail-dialog"
  >
    <el-form label-width="100px" :model="formData">
      <!-- 事件编号 -->
      <el-form-item label="事件编号：">
        <el-input v-model="formData.eventId" placeholder="如：js202401010001" readonly />
      </el-form-item>

      <!-- 事件类型 & 等级 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="事件类型：">
            <el-select v-model="formData.eventType" placeholder="请选择">
              <el-option label="交通事故" value="1" />
              <el-option label="道路施工" value="2" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="事件等级：">
            <el-select v-model="formData.eventLevel" placeholder="请选择">
              <el-option label="一般" value="1" />
              <el-option label="紧急" value="2" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 时间 & 地点 -->
      <el-form-item label="发生时间：">
        <el-date-picker
          v-model="formData.time"
          type="datetime"
          placeholder="年/月/日"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>

      <el-form-item label="发生地点：">
        <el-input v-model="formData.location" placeholder="如：武汉市光谷广场" />
      </el-form-item>

      <!-- 车辆信息 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="车牌号：">
            <el-input v-model="formData.license" placeholder="如：鄂A00001" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="驾驶员：">
            <el-input v-model="formData.driver" placeholder="如：张三三" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 处理状态 -->
      <el-form-item label="处理状态：">
        <el-radio-group v-model="formData.status">
          <el-radio label="0">未处理</el-radio>
          <el-radio label="1">处理中</el-radio>
          <el-radio label="2">已处理</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref } from 'vue'

const visible = ref(false)
const formData = reactive({
  eventId: '',
  eventType: '',
  eventLevel: '',
  time: '',
  location: '',
  license: '',
  driver: '',
  status: '0'
})

// 打开弹窗
const openDialog = (data) => {
  Object.assign(formData, data)
  visible.value = true
}

// 提交处理
const handleSubmit = () => {
  console.log('提交数据：', formData)
  visible.value = false
}

// 取消处理
const handleCancel = () => {
  visible.value = false
}

// 暴露方法
defineExpose({ open: openDialog })
</script>

<style lang="scss" scoped>
// 表单间距调整
.el-form-item {
  margin-bottom: 18px;
}

// 弹窗标题样式穿透
:deep(.event-detail-dialog) {
  .el-dialog__header {
    background: #409EFF;
    margin: 0;

    .el-dialog__title {
      color: white;
      font-size: 16px;
    }
  }

  // 底部按钮布局
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
  }
}

// 表单标签对齐
:deep(.el-form-item__label) {
  text-align: justify;
  padding-right: 12px;
}
</style>
